<template>
  <div class="dashboard-container">
    <div class="app-container">

      <template>
        <el-row type="flex" justify="end">
          <el-button type="primary" size="small">添加角色</el-button>
        </el-row>
      </template>
      <!-- 表格 -->
      <el-table border :data="rolesList" row-key="id">
        <el-table-column label="角色名称" prop="title" />
        <el-table-column label="角色描述" prop="description" />
        <el-table-column label="操作">
          <template v-slot="{row}">
            <!--
              因为系统只有2级权限，分别是：
              页面访问权限（一级权限）
              按钮操作权限（二级权限）
              因此是没有第三级权限的，没有第三级权限也就意味着渲染二级权限的时候“添加”按钮不需要渲染
              如何判断渲染的是多少级权限呢？答：可以通过pid判断
              当pid的值为"0"的时候，表示渲染的是一级权限，否则不是
             -->
            <el-button type="primary" @click="addPerm(row.id,2)">分配权限</el-button>
            <el-button @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" align="center">
        <el-pagination
          layout=" total, pager, next"
          :total="50"
        />
      </el-row>
      <!-- 新增权限 -->

      <AddPerm
        ref="addPerm"
        :show-dialog.sync="visibleDialog"
      />
    </div>
  </div>
</template>

<script>
import { getRolesList } from '@/api/juese'
export default {
  data() {
    return {
      rolesList: []
    }
  },
  created() {
    this.getAllRoles()
  },
  methods: {
    async getAllRoles() {
      const res = await getRolesList({

      })
      this.rolesList = res.data
      console.log(52, res)
    }

  }
}
</script>

<style lang="scss" scoped>
.el-table{
  margin-top: 20px;
}
</style>
